<template>
    <el-container>
        <el-aside :style="{ 'overflow-X': 'hidden', width: this.$store.state.menu.stretchBtnIconStatusWidth + 'px' }">
            <x-menu />
        </el-aside>
        <el-container>
            <div class="header-box">
                <x-header />
            </div>
            <x-menu-tag />
            <el-main>
                <div class="main-body">
                    <router-view />
                </div>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</template>
  
<script>
export default {
    name: "home",
    data() {
        return {}
    },
    components: {
        'x-menu': () => import("../components/common/xMenu"),
        'x-header': () => import("../components/common/xHeader"),
        'x-menu-tag': () => import("../components/common/xMenuTags"),
    }
}
</script>
  
<style scoped lang="less">
.el-header {
    background-color: #FFFFFF;
}

.el-container {
    height: 100%;

    .header-box {
        height: 50px;
        width: 100%;
    }
}

.el-aside {
    background-color: #FFFFFF;
    transition: all 0.2s;
    height: 100% !important;
}

.el-main {
    width: 100%;
    height: 100%;
    padding: 0px;
}

.main-body {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
</style>